<template>
    <div class="head-line">添加员工</div>
    <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 100%">
        <el-form-item label="员工名称">
            <el-input v-model="form_datas.username" />
        </el-form-item>

        <el-form-item label="员工年龄">
            <el-input v-model="form_datas.userage" />
        </el-form-item>

        <el-form-item label="员工性别">
            <el-input v-model="form_datas.usergender" />
        </el-form-item>

        <el-form-item label="员工电话">
            <el-input v-model="form_datas.userphone" />
        </el-form-item>

        <el-form-item label="员工邮箱">
            <el-input v-model="form_datas.useremail" />
        </el-form-item>

        <el-form-item label="所在部门">
            <el-input v-model="form_datas.userdepartment" />
        </el-form-item>
    </el-form>
    <div class="but-box">
        <el-button type="primary" size="default" @click="saveDatas">添加用户</el-button>
    </div>

</template>
<script>
    import { ref, reactive } from "vue";
    import axios from 'axios';
    export default {
        name: 'SupfilemdNav',
        setup() {

            // 文章对象数据
            let form_datas = reactive({
                username: '',
                userage: "",
                usergender: "",
                userphone: "",
                useremail: "",
                userdepartment: ""
            })

            let labelPosition = ref('top');

            // 文章添加
            function saveDatas() {
                let url = "http://localhost:8080/users";
                axios.post(url, {
                    username: form_datas.username,
                    userage: form_datas.userage,
                    usergender: form_datas.usergender,
                    userphone: form_datas.userphone,
                    useremail: form_datas.useremail,
                    userdepartment: form_datas.userdepartment
                })
                    .then(function (response) {
                        console.log("添加成功", response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }

            return {
                labelPosition,
                form_datas,
                saveDatas
            }
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .head-line {
        width: 100%;
        height: 50px;
        position: relative;
        line-height: 50px;
        /* border: 1px solid red; */
        font-weight: 600;
        background: #fff;
        padding-left: 20px;
        /* margin-bottom: 15px; */
    }

    .head-line::after {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        margin-left: 10px;
        display: block;
        width: 3.5px;
        height: 18px;
        background: #51B37F;
        border-radius: 5px;
        /* border: 1px solid red; */
    }

    .el-form {
        /* height: 250px; */
        padding: 0 500px 0 20px;
        background: #fff;
        /* border: 1px solid red; */
    }

    .v-md-editor {
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .but-box {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 1px solid red; */
    }

    .el-button {
        /* margin-top: 15px; */
        padding: 0 10px;
        /* margin-bottom: 15px; */
        background: #51B37F;
    }
</style>